<template>
    <div class="ve_container">
        <!-- 搜索 -->
        <el-form ref="queryForm" :inline="true" :model="params">
            <el-form-item label="名称" prop="name">
                <el-input
                    clearable
                    v-model="name"
                    placeholder="请输入"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onSubmit(params, getDataList)"
                >
                    {{ buttons.search.name }}
                </el-button>
                <el-button @click="resetForm(queryForm, params, getDataList)">
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <ve-table
            :table="{
                data: tableData,
            }"
            :pagination="{
                onSizeChange: (val) =>
                    handleSizeChange(val, params, getDataList),
                onCurrentChange: (val) =>
                    handleCurrentChange(val, params, getDataList),
                currentPage: current,
                pageSize: size,
                total: total,
            }"
        >
            <el-table-column prop="requestId" label="请求ID"></el-table-column>
            <el-table-column prop="ip" label="请求IP"></el-table-column>
            <el-table-column
                prop="requestMethod"
                label="请求方法"
            ></el-table-column>
            <el-table-column
                prop="requestUrl"
                label="请求url"
            ></el-table-column>
            <el-table-column prop="userId" label="用户ID"></el-table-column>
            <el-table-column
                prop="success"
                label="请求是否成功"
            ></el-table-column>
            <el-table-column prop="os" label="操作系统"></el-table-column>
            <el-table-column
                prop="userAgent"
                label="USER_AGENT"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="createTime"
                label="操作时间"
            ></el-table-column>

            <!--            <el-table-column fixed="right" label="操作">-->
            <!--                <template v-slot:default="{ row }">-->
            <!--                    <el-button-->
            <!--                        v-permission="['edit']"-->
            <!--                        @click.prevent="handleEdit(buttons.edit.name, row)"-->
            <!--                        type="primary"-->
            <!--                        size="small"-->
            <!--                    >-->
            <!--                        {{ buttons.edit.name }}-->
            <!--                    </el-button>-->
            <!--                    <el-button-->
            <!--                        v-permission="['del']"-->
            <!--                        @click.prevent="handleDel(row.id)"-->
            <!--                        type="danger"-->
            <!--                        size="small"-->
            <!--                    >-->
            <!--                        {{ buttons.del.name }}-->
            <!--                    </el-button>-->
            <!--                    <el-button-->
            <!--                        v-permission="['member']"-->
            <!--                        @click.prevent="allMember(row.id)"-->
            <!--                        type="info"-->
            <!--                        size="small"-->
            <!--                    >-->
            <!--                        {{ buttons.member.name }}-->
            <!--                    </el-button>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
        </ve-table>
    </div>
</template>
<script>
import menu from "@/views/pages/system/components/menu";
import { moduleName } from "@/config";

export default {
    data: () => ({
        description: "请求日志管理",
        buttons: {
            search: { name: "查询" },
            add: { name: "添加" },
            edit: { name: "编辑" },
            del: { name: "删除" },
            member: { name: "查看成员", toPath: true }, //topath:true 需要设置跳转路径
        },
        // type 0:目录 1：菜单 2：按钮
        type: "1",
        icon: "Brush",
        name: "请求日志管理",
        parentMenu: menu,
        module: moduleName,
    }),
};
</script>

<script setup>
import { reactive, toRefs, ref, onMounted } from "vue";

//*导入公共查询方法
import {
    onSubmit,
    resetForm,
    handleSizeChange,
    handleCurrentChange,
} from "@/views/pages/common";

const queryForm = ref(null);
const tableData = ref([]);
const params = reactive({
    name: "",
    size: 10,
    current: 1,
    total: 0,
});
const { name, size, current, total } = toRefs(params);

/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    const { code, data } = await VE_API.system.requestLogFindPage(params);
    if (code === 0) {
        const { size, current, total, records } = data;
        params.size = size;
        params.current = current;
        params.total = total;
        tableData.value = records;
    }
};
onMounted(async () => {
    await getDataList();
});
</script>

<style lang="scss" scoped></style>
